<template>
  <div class="input-search-wrap">
    <a-input-search
      ref="reff"
      v-model="defaultValue"
      :placeholder="placeholder"
      :size="size"
      allowClear
      @search="onSearch"
      @pressEnter="btnSearch"
    >
      <a-button
        @click.native="btnSearch"
        class="search-btn"
        :size="size"
        slot="enterButton"
        v-if="!isBtn"
      >
        <a-icon type="search" :style="{ color: '#fff' }" />
      </a-button>
      <a-button
        @click.native="btnSearch"
        class="search-btn"
        slot="enterButton"
        v-else
        >搜索
      </a-button>
    </a-input-search>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: String,
    allowClear: Boolean,
    prefix: String,
    keywords: String,
    btnTitle: String,
    size: String,
    isSlote: Boolean,
    isBtn: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      defaultValue: ''
    }
  },
  created() {
    this.defaultValue = this.keywords
  },
  watch: {
    keywords(v) {
      this.defaultValue = v
    }
  },
  methods: {
    onSearch(value) {
      this.$emit('inputChange', value || '')
    },
    btnSearch() {
      this.$emit('search', this.defaultValue || '')
    }
  }
}
</script>
